<template>
    <div style="width:100%;height:100%">
       <header>
           <van-icon name="arrow-left" @click="$router.go(-1)"/>
           <div>{{user.title}}</div>
       </header>
        <main>
            <div class='left logbox'>
                <div class="headImg">
                    <img :src="user.img" alt="">
                </div>
                <div class="dialog-box">{{user.content}}</div>
            </div>
            <div class="dia-box" v-for="it in msgList" :key="it.idx">
                <div :class="['logbox',it.side]" >
                    <div class="headImg">
                        <img :src="it.img" alt="">
                    </div>
                    <div class="dialog-box">{{it.ms}}</div>
                </div>
            </div>
        </main>
        <footer>
            <label><input type="text" placeholder="想说点什么" v-model="sendMsg" @keydown="addByEnterKey(...arguments, msgList)"></label>
        </footer>
    </div>
</template>
<script>
import mockMessage from '../../apis/messageApis'

export default {
    data(){
        return {
            user: {},
            msgList:[],
            sendMsg:''
        }
    },
    created(){
        let id = this.$route.params.id      
        console.log(this.$route.params);
        this.getList(id)
    },

    methods:{
        async getList(id){
            // console.log(id);
           let res = await mockMessage.getMessageApi();
           let listArr = res.data.rows
           this.user = listArr.find(it=>it.id === id*1)
        },
        async autoResponse(_message, _list){
            let res = await mockMessage.autoResponseApi(_message)
            if(res.code === 200){
                let ran = parseInt(Math.random()*10)
    
                setTimeout(()=>{
                    _list.push({id:_list.length, ms:res.data[ran], time:Date.now(), side:'left', img: this.user.img})
                },800)
            }
        },
        addByEnterKey(e, _list){
          
             if (e.keyCode == 13) {
                   let _message = this.sendMsg
                   let _maxIdx = _list.length
                  _list.push({id:_maxIdx, ms:_message, time:Date.now(), side:'right', 
                  img: 'https://img2.baidu.com/it/u=2979250578,1742251490&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'})
                  this.sendMsg = ''
                  this.autoResponse(_message, _list)
            }
        }
    }

}
</script>

<style lang="less" scoped>
@import "../../style/common.less";

    header{
        width: 100%;
        height: 46px;
        display: block;
        text-align: center;
        line-height: 46px;
        display: flex;
        i{
            width: 16px;
            line-height: 46px;
            margin:0 16px ;
        }
        div{
            flex:1;
            font-size: 1.1rem;
            margin-left: -52px;
        }
    }
    main{
        display: block;
        overflow-x: hidden;
        height: calc(100% - 88px);
        .logbox{
            width: 100%;
            padding: 6px 0;
            margin-top: 10px;
            .clear();
            .headImg{
                float: left;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                overflow: hidden;
                margin: 8px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .dialog-box{
                float: left;
                background: #fef4bf;
                max-width: 120px;
                border-radius: 12px;
                border-top-left-radius: 0;
                padding: 4px 8px;
            }
            &.right{
                .headImg{
                    float: right;
                }
                .dialog-box{
                    float: right;
                    border-radius: 12px;
                    border-top-right-radius: 0;
                }
            }
        }
    }

    footer{
        display: block;
        width: 100%;
        height: 42px;
        background: #fff;
        input{
            outline: none;
            border: none;
            text-indent: 20px;
            line-height: 42px;
            width: 100%;
            font-size: 0.9rem;
        }
    }
    
</style>